<template>
  <div class="app-container">
    <el-form ref="dataForm" size="mini" :inline="true" :model="dataForm">
      <div style="margin-left: 20px;padding-top:20px;">
        <el-row>
          <el-form-item label="请求日期:" prop="dateValue">
            <el-date-picker
              v-model="dataForm.dateValue"
              unlink-panels
              align="right"
              size="small"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyyMMdd"
              range-separator="-"
              start-placeholder="请求开始日期"
              end-placeholder="请求结束日期"
              clearable
              :picker-options="pickerOptions"
              @change="dateChange"
            />
          </el-form-item>
          <el-form-item label="设备名称:">
            <el-input v-model="dataForm.deviceName" @change="dateChange" placeholder="模糊查询" clearable/>
          </el-form-item>
          <el-form-item label="设备编码:">
            <el-input v-model="dataForm.deviceNo" @change="dateChange" placeholder="模糊查询" clearable/>
          </el-form-item>
          <el-form-item label="负荷类型:">
            <el-select v-model="dataForm.loadType" @change="dateChange" clearable>
              <el-option
                v-for="item in loadTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" :loading="dataListLoading" @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <el-table
      ref="dataTable"
      v-loading="dataListLoading"
      :data="dataList"
      height="600"
      border
      size="small"
      style="width: 100%;"
    >
      <el-table-column prop="id" header-align="center" align="center" label="序号" width="80px"/>
      <el-table-column prop="deviceName" header-align="center" align="center" label="设备名称" width="150px"/>
      <el-table-column prop="deviceNo" header-align="center" align="center" label="设备编码" width="150px"/>
      <el-table-column prop="deviceStatus" header-align="center" align="center" label="设备状态" width="100px"/>
      <el-table-column prop="deviceArea" header-align="center" align="center" label="区域" width="200px"/>
      <el-table-column prop="lineBody" header-align="center" align="center" label="线体" width="100px"/>
      <el-table-column prop="processId" header-align="center" align="center" label="工序ID" width="200px"/>
      <el-table-column prop="duration" header-align="center" align="center" label="持续时间(工时)" width="150px"/>
      <el-table-column prop="loadType" header-align="center" align="center" label="负荷类型" width="100px">
        <template slot-scope="scope">
          <span v-for="(item, index) in loadTypeList" :key="index">
            {{ item.value === scope.row.loadType ? item.label : '' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="application" header-align="center" align="center" label="用途" width="200px"/>
      <el-table-column prop="requestTime" header-align="center" align="center" label="请求时间" width="180px">
        <template slot-scope="scope">
          <span>
            {{
              moment(`${scope.row.requestDate}${scope.row.requestTime}`, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss')
            }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
  </div>
</template>

<script>
import moment from 'moment'
// import {getList} from '@/api/deviceInfo'

export default {
  name: 'deviceInfo',
  data () {
    return {
      dataForm: {
        dateValue: '',
        deviceName: '',
        deviceNo: '',
        loadType: ''
      },
      dataList: [],
      pageIndex: 1,
      totalPage: 0,
      pageNum: 1,
      pageSize: 10,
      dataListLoading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              console.log('最近一周:', this)
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ],
        disabledDate (time) {
          // 3600 * 1000 * 24 * 90
          return time.getTime() > Date.now()
        }
      },
      loadTypeList: [
        {label: '全部', value: ''},
        {label: '持续时间', value: 'D'},
        {label: '强度系数', value: 'I'},
        {label: '常数', value: 'C'},
        {label: '数量', value: 'Q'}
      ]
    }
  },
  created () {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24)
    let dayMon = date.getMonth() + 1
    dayMon = dayMon < 10 ? '0' + dayMon : dayMon
    let dayDate = date.getDate()
    dayDate = dayDate < 10 ? '0' + dayDate : dayDate
    this.dataForm.startDate = `${date.getFullYear()}${dayMon}${dayDate}`
    this.dataForm.endDate = `${date.getFullYear()}${dayMon}${dayDate}`
    this.dataForm.dateValue = [this.dataForm.startDate, this.dataForm.endDate]
    this.getDataList()
  },
  methods: {
    moment,
    // 获取数据列表
    getDataList (index) {
      const params = {}
      const {dateValue, deviceName, deviceNo, loadType} = this.dataForm
      this.pageIndex = index || this.pageIndex
      params.pageSize = this.pageSize
      params.pageNum = this.pageIndex
      params.requestStartDate = dateValue ? dateValue[0] : ''
      params.requestEndDate = dateValue ? dateValue[1] : ''
      params.deviceName = deviceName
      params.deviceNo = deviceNo
      params.loadType = loadType
      console.log('查询参数', params)
      // 请求后台
      const that = this
      // getList(params).then(resp => {
      //   console.log(resp)
      //   that.dataList = resp.dataList
      //   that.totalPage = resp.total
      // });
      this.$http({
        url: this.$http.adornUrl('TotalFactor/device-info/list'),
        method: 'get',
        params: params
      }).then(function (resp) {
        console.log(resp)
        that.dataList = resp.data.data.dataList
        that.totalPage = resp.data.data.total
        console.log('请求成功：' + resp.status + ',' + resp.statusText)
      })
    },
    // 触发器
    dateChange () {
      this.onClickEvent()
    },
    onClickEvent () {
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
<style>
.el-table .cell {
  max-height: 200px;
  overflow-y: auto;
}
</style>
